<template>
    <div class="menu">
        <img src="../../assets/logo.png" height="60px" style="transform: scale(2)" />
        <el-aside width="200px">
            <el-menu default-active="首页" class="el-menu-vertical-demo" background-color="#001528" text-color="#fff"
                active-text-color="#2D8CF0" @select="select">
                <template v-for="(item, index) in $router.options.routes">
                    <el-menu-item v-if="item.children == undefined && !item.hidden && hasPrivilege(item.code)"
                        :index="item + ''" :key="index">
                        <i :class="item.iconClass"></i>
                        {{ item.name }}
                    </el-menu-item>
                    <el-submenu v-else-if="!item.hidden && hasPrivilege(item.code)" :index="index + ''" :key="index">
                        <template slot="title">
                            <i :class="item.iconClass"></i>
                            <span>{{ item.name }}</span>
                        </template>
                        <el-menu-item-group v-for="(child, index) in item.children.filter(e => {
                            return hasPrivilege(e.code) && !e.hidden
                        })" :key="index">
                            <el-menu-item :index="child.name">
                                <i :class="child.iconClass"></i>
                                {{ child.name }}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </template>
            </el-menu>
        </el-aside>
    </div>
</template>

<script>

import form from '@/utils/form';
export default {
    mixins: [
        form
    ],
    data() {
        return {

            isCollapse: true,
        }
    },
    methods: {
        select(index) {
            this.$emit("select", index)
        }
    }
}
</script>

<style lang="scss" scoped>
.menu {
    width: 200px;
    height: 100%;
    background-color: #001528;

    .el-aside {
        height: 90%;

        .el-menu {
            height: 100%;
            border: 0;

            .fa {
                margin-right: 5px;
            }

            .el-submenu .el-menu-item {
                min-width: 0px;
            }


        }


    }
}
</style>